<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>DialogHelperDemo</title>
    <link rel="stylesheet" type="text/css" href="js/jquery-ui.css">
    
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#opener').click(function() {
                //初始化一个辅助对象，这个对象可以作为全局对象只创建一次后反复使用更好！
                dlgHelper = new DialogHelper();

                //设置个性化信息
                dlgHelper.set_Title("确认要删除现有项目吗？");
                dlgHelper.set_Msg("执行这个操作，原来的项目将被删除，你确认要这么做吗？");
                dlgHelper.set_Buttons({
                    '确定': function(ev) {
                        //这里可以调用其他公共方法。
                        $(this).dialog('close');
                    },
                    '取消': function() {
                        //这里可以调用其他公共方法。
                        $(this).dialog('close');
                    }
                });

                //打开窗体
                dlgHelper.open();

            });
        });

        //--对话框辅助对象-begin
        //作者：justin
        //出处：http://justinw.cnblogs.com
        //现在这个对象只是简单的封装(未来可能会复杂些)。
        //其作用就是简化jQuery UI的dialog的的调用方式，不在需要改动独立的DOM结构，参数传递方式更直接。
        DialogHelper = function() {

            var m_title = ""; //设置标题
            var m_msg = ""; //设置消息正文
            var m_btns = null; //设置按钮
            this.dlgDiv = $("<div><p><span class=\"ui-icon ui-icon-alert\" style=\"float: left; margin: 0 7px 20px 0;\"></span></p></div>");//这部分可根据情况自定义

            //todo:图标、高度、宽度、弹出模式等都应该可以设置。
            this.set_Title = function(val) {
                this.m_title = val;
            }
            this.get_Title = function() {
                return this.m_title;
            }
            this.set_Msg = function(val) {
                this.m_msg = val;
            }
            this.get_Msg = function() {
                return this.m_msg;
            }
            this.set_Buttons = function(val) {
                this.m_btns = val;
            }
            this.get_Buttons = function() {
                return this.m_btns;
            }

            this.open = function() {
                $dlg = this.dlgDiv.clone(); //这个克隆很重要,否则反复添加正文。
                $dlg.children().filter("p").html(this.dlgDiv.children().filter("p").html() + this.get_Msg()); //增加自定义消息

                $dlg.dialog({
                    autoOpen: true,
                    show: 'blind',
                    hide: 'explode',
                    position: 'center',
                    height: 260,
                    width: 460,
                    modal: true,
                    title: this.get_Title(),
                    buttons: this.get_Buttons()
                });
            }
            //todo:考虑是否有内存泄露的可能    
        }
        //--对话框辅助对象-end

    </script>

</head>
<body data-feedly-processed="yes">
    <button id="opener">
        Open the dialog</button>
</body>
</html>
